@extends('layouts.scaffold')

@section('head')
	{{ HTML::style('styles/meteoIntro.css')}}
	<script type="text/javascript">
		
		var pagePrefix = location.origin+'/jogo-mina/public/meteo/';
		var pageSufix = '/previsao'; //no caso de estarmos na pagina da intro
		var url;
		var id = {{$id}};

		document.onkeydown = function(e) {
		    if (!e) e = window.event;
		    var keynum = e.keyCode ? e.keyCode : e.which; // IE vs others
		    switch (keynum) {
		        case 37:// case 38:  //key is left or up
		            if (id <= 1) break;  //if is the first do nothing
		            goToPrev(); // function which goes to previous image
		            return false; //"return false" will avoid further events
		        case 39:// case 40: //key is left or down
		            if (id >= 23) break; //if last do nothing
		            goToNext(); // function which goes to next image
		            return false; //"return false" will avoid further events
		    }
		    return; //using "return" other attached events will execute
		};

		function goToPrev() {
			id--;
			url = pagePrefix + id + pageSufix;
		    showPage();
		    return false;
		}

		function goToNext() {
			id
		    url = pagePrefix + id + pageSufix;
			showPage();
		    return false;
		}

		function showPage() {
		    window.location = url;
		}

		window.onload = function()
		{
		    document.getElementById("audio").play();
		}

	</script>

@endsection

@section('navbar')
	@include('menu.navbar')
@endsection

@section('main')
<audio autoplay>
  <source id="audio" src="{{ URL::asset('sounds/meteoIntro.mp3')}}" type="audio/mpeg">
</audio>
<div class="btns col-md-1">
	<a href="{{URL::to('meteo/1/previsao')}}" class="btn btn-default"><strong>1</strong></a>
	<a href="{{URL::to('meteo/2/previsao')}}" class="btn btn-default"><strong>2</strong></a>
	<a href="{{URL::to('meteo/3/previsao')}}" class="btn btn-default"><strong>3</strong></a>
	<a href="{{URL::to('meteo/4/previsao')}}" class="btn btn-default"><strong>4</strong></a>
	<a href="{{URL::to('meteo/5/previsao')}}" class="btn btn-default"><strong>5</strong></a>
	<a href="{{URL::to('meteo/6/previsao')}}" class="btn btn-default"><strong>6</strong></a>
	<a href="{{URL::to('meteo/7/previsao')}}" class="btn btn-default"><strong>7</strong></a>
	<a href="{{URL::to('meteo/8/previsao')}}" class="btn btn-default"><strong>8</strong></a>
	<a href="{{URL::to('meteo/9/previsao')}}" class="btn btn-default"><strong>9</strong></a>
	<a href="{{URL::to('meteo/10/previsao')}}" class="btn btn-default"><strong>10</strong></a>
	<a href="{{URL::to('meteo/11/previsao')}}" class="btn btn-default"><strong>11</strong></a>
	<a href="{{URL::to('meteo/12/previsao')}}" class="btn btn-default"><strong>12</strong></a>
	<a href="{{URL::to('meteo/13/previsao')}}" class="btn btn-default"><strong>13</strong></a>
	<a href="{{URL::to('meteo/14/previsao')}}" class="btn btn-default"><strong>14</strong></a>
	<a href="{{URL::to('meteo/15/previsao')}}" class="btn btn-default"><strong>15</strong></a>
	<a href="{{URL::to('meteo/16/previsao')}}" class="btn btn-default"><strong>16</strong></a>
	<a href="{{URL::to('meteo/19/previsao')}}" class="btn btn-default"><strong>17</strong></a>
	<a href="{{URL::to('meteo/20/previsao')}}" class="btn btn-default"><strong>18</strong></a>
	<a href="{{URL::to('meteo/21/previsao')}}" class="btn btn-default"><strong>19</strong></a>
	<a href="{{URL::to('meteo/22/previsao')}}" class="btn btn-default"><strong>20</strong></a>
</div>
<div id="primary" class="col-md-11">
	<div class="container-fluid">
		<div class="container-fluid">
			<h3><strong><center>Meteorologia</center></strong></h3>
		</div>	
		<div class="container-fluid">
			<div id="sun" class="col-md-4 innerDivs">
				<center><img src="{{URL::asset('img/meteo/intro/sol.png')}}"></center>
			</div>
			<div class="col-md-7 container-fluid innerDivs">
				<div id="rain" class="row">
					<center><img src="{{URL::asset('img/meteo/intro/chuva.png')}}"></center>
				</div>
				<div id="clouds"  class="row">
					<center><img src="{{URL::asset('img/meteo/intro/nuvens.png')}}"></center>
				</div>
			</div>
		</div>
	</div>
	
	<div class="col-md-offset-2">
		@if($id <= 1)
			<a href="{{URL::to('meteo/'.($id-1).'/previsao')}}" class="btn btn-primary disabled"><strong><</strong></a>
		@else
			<a href="{{URL::to('meteo/'.($id-1).'/previsao')}}" class="btn btn-primary"><strong><</strong></a>
		@endif
		<input type="text" name="id" ng-model="id" hidden>
		@if($id >= 23)
			<a href="{{URL::to('meteo/'.$id.'/previsao')}}" class="btn btn-primary disabled"><strong>></strong></a>
		@else
			<a href="{{URL::to('meteo/'.$id.'/previsao')}}" class="btn btn-primary"><strong>></strong></a>
		@endif
	</div>

</div>

@endsection